import { View, Text, StyleSheet, Pressable } from 'react-native'
import React, { useState } from 'react'
import UIConstants from '../constants/UIConstants'
import Color from 'color' //第三方提供的颜色转换模块

export default function ZhButton({ onPress, title, bgColor = UIConstants.COLOR_GREEN }) {
   let [color,steColor] = useState(bgColor)    //props不能修改，state可以修改

    return (
        <Pressable onPress={onPress} onPressIn={()=>steColor(Color(color).darken(0.3).hex())} onPressOut={()=>steColor(bgColor)}>
            <View style={[ss.btn, { backgroundColor: color }]}>
                <Text style={ss.txt}>{title}</Text>
            </View>
        </Pressable>
    )
}

let ss = StyleSheet.create({
    btn: {
        backgroundColor: UIConstants.COLOR_GREEN,
        borderRadius: UIConstants.BORDER_RADIUS_MD,
        paddingVertical: UIConstants.SPACE_COL_MD
    },
    txt: {
        color: UIConstants.COLOR_WHITE,
        textAlign: 'center',
        fontSize: 16,
    }

})